<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>每天都会过，请保持微笑!!!</title>
    <style>
      html,
      body {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        position: fixed;
      }

      body {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-filter: contrast(120%);
        filter: contrast(120%);
        background-color: black;
      }

      .container {
        width: 100%;
        height: 100%;
        background-image: radial-gradient(
          1600px at 70% 120%,
          rgba(33, 39, 80, 1) 10%,
          #020409 100%
        );
      }

      .content {
        width: inherit;
        height: inherit;
      }

      #universe {
        width: 100%;
        height: 100%;
      }

      #footerContent {
        font-family: sans-serif;
        font-size: 110%;
        color: rgba(200, 220, 255, 0.3);
        width: 100%;
        position: fixed;
        bottom: 0px;
        padding: 20px;
        text-align: center;
        z-index: 20;
      }

      #footer {
        position: absolute;
        bottom: 0px;
        height: 300px;
        width: 100%;
      }

      #scene {
        height: 100%;
        position: absolute;
        left: 50%;
        margin-left: -800px;
      }

      a {
        text-decoration: none;
        color: rgba(200, 220, 255, 1);
        opacity: 0.4;
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
      }

      a:hover {
        opacity: 1;
      }

      /*-----------------------------音乐-------------------------------------*/

      #music {
        position: absolute;
        width: 24px;
        height: 24px;
        right: 8px;
        top: 8px;
        z-index: 99;
      }

      .music {
        width: 100%;
        height: 100%;
        background: url("http://statics.xiaoenai.com/v4/job/music.png")
          no-repeat center center;
        background-size: 24px 24px;
        z-index: 10;
        position: relative;
      }

      .play {
        animation: rotate 1.2s linear infinite;
        -webkit-animation: rotate 1.2s linear infinite;
      }

      #music > span {
        color: #fff;
        position: absolute;
        left: -60px;
        top: 0;
        line-height: 24px;
        font-size: 14px;
        opacity: 0;
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear;
      }

      #music > span.zshow {
        left: -30px;
        opacity: 1;
      }

      @keyframes rotate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      @-webkit-keyframes rotate {
        0% {
          -webkit-transform: rotate(0);
        }
        100% {
          -webkit-transform: rotate(360deg);
        }
      }

      /*box*/

      #box {
        color: #fff;
        position: absolute;
        bottom: 30%;
        left: 50%;
        margin-left: -96px;
        z-index: 100;
        transform: rotate(-12deg);
        -webkit-transform: rotate(-12deg);
        font-size: 12px;
      }

      .txt {
        color: hsla(0, 0%, 0%, 0);
        text-shadow: #fff 0 0 10px;
        transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
      }

      @-moz-document url-prefix() {
        .txt {
          text-shadow: #fff 0 0 20px;
        }
      }

      /* FF fix */

      .fadeInUp {
        -webkit-animation: fadeInUp 3s 0.2s ease both;
        -moz-animation: fadeInUp 3s 0.2s ease both;
      }

      @-webkit-keyframes fadeInUp {
        0% {
          opacity: 0;
          -webkit-transform: translateY(100px);
        }
        100% {
          opacity: 1;
          -webkit-transform: translateY(0);
        }
      }

      @-moz-keyframes fadeInUp {
        0% {
          opacity: 0;
          -moz-transform: translateY(100px);
        }
        100% {
          opacity: 1;
          -moz-transform: translateY(0);
        }
      }

      #canvas {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        margin-top: 0 !important;
      }

      #lyric {
        position: absolute;
        bottom: 11.84375rem;
        right: -2rem;
        width: 18rem;
        color: #fff;
        text-align: center;
      }

      @-webkit-keyframes large-wave {
        from {
          -webkit-transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(-15deg);
        }
      }

      @-webkit-keyframes medium-wave {
        from {
          -webkit-transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(-12deg);
        }
      }

      @-webkit-keyframes small-wave {
        from {
          -webkit-transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(-10deg);
        }
      }

      @keyframes large-wave {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-15deg);
        }
      }

      @keyframes medium-wave {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-12deg);
        }
      }

      @keyframes small-wave {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-10deg);
        }
      }

      .top {
        -webkit-animation: large-wave 5s infinite alternate;
        animation: large-wave 5s infinite alternate;
      }

      .middle {
        -webkit-animation: medium-wave 5.5s infinite alternate;
        animation: medium-wave 5.5s infinite alternate;
      }

      .bottom {
        -webkit-animation: small-wave 6s infinite alternate;
        animation: small-wave 6s infinite alternate;
      }

      @-webkit-keyframes dash {
        from {
          stroke-dashoffset: 1000;
        }
        to {
          stroke-dashoffset: 0;
        }
      }

      @keyframes dash {
        from {
          stroke-dashoffset: 1000;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
      * {
        margin: 0;
        padding: 0;
      }
      .wind {
        stroke-dasharray: 100;
        opacity: 0.25;
        -webkit-animation: dash 35s linear infinite;
        animation: dash 35s linear infinite;
      }
      ul {
        list-style: none;
      }
      .course {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        z-index: 999;
        padding-top: 0.3125rem;
        padding-left: 0.3125rem;
      }
      .course li {
        cursor: pointer !important;
        width: 100%;
      }
      .course li a {
        text-decoration: none;
        color: #fff;
        display: block;
        width: 100%;
      }
      .course li:hover {
        background-color: rgba(204, 204, 204, 0.3);
      }
    </style>
  </head>

  <body>
    <!-- <ul class="course">
      <li><a href="<%= intrudoce %>">使用说明</a></li>
      <li>
        <a href="<%= downloadUrl %>"
          >快手达人助手更新包下载(本地自动更新失败时，可下载解压到安装目录)</a
        >
      </li>
    </ul> -->
    <div class="container">
      <div class="content">
        <canvas id="universe"></canvas>
        <canvas id="canvas"></canvas>
        <div id="footer" class="fadeInUp">
          <svg id="scene" x="0px" y="0px" width="1600px" height="315px">
            <path
              id="ground"
              d="M0,316.4209c0,0,157.7119-35.416,469-56c7.3833-0.4883,23.7876-3.5488,31.3335-4.0166
                  c3.7681-0.2334,19.4302,0.9424,28.3335,0.3506c17.1494-1.1396,30.9072-4.2734,38.333-4.6836
                  c7.5972-0.4189,18.4058,0.3799,27.6665-0.9834c5.7075-0.8408,10.1318-4.042,14.9248-4.2705
                  c7.8369-0.373,24.5693,3.6084,34.4087,4.2705c11.0586,0.7432,15.2656-1.8135,24.3335-2.1523c10.0576-0.376,20.4629,1.3867,28.6665,0
                  c3.5957-0.6074,4.4194,0.4209,7.7227-0.7715c1.4927-0.5391,5.8179-3.5693,6.9438-4.2432c3.8335,0.667,6.1426-1.0732,9.917-1.167
                  c2.2739-0.0566,3.9673-0.9072,6.249-0.9609c2.2725-0.0537,5.5547-1.2383,7.8345-1.2881c2.25-0.0498,3.498,1.0352,5.7554,0.9883
                  c2.9648-0.0615,7.9341,0.3164,10.9111,0.2607c2.2461-0.042,2.4976-0.5195,4.7505-0.5586c2.9663-0.0518,2.1045-0.5615,5.0825-0.6074
                  c1.5811-0.0244,6.9976,0.4131,8.582,0.3896c0.8887-0.0127,2.6113,0.373,3.5015,0.3604c1.5527-0.0215,2.2739-0.4404,3.8296-0.4609
                  c1.416-0.0186,2.0854-0.8555,3.5039-0.873c1.0835-0.0127,2.9155,0.7939,4.0005,0.7813c1.1104-0.0127,3.5542,0.4805,4.666,0.4688
                  c1.3047-0.0137,1.2773-0.5332,2.584-0.5459c1.415-0.0137,1.165-0.4414,2.5825-0.4541c0.916-0.0078,3.499,0.3984,4.416,0.3906
                  c1.499-0.0127,1.833,0.6221,3.3345,0.6104c1.3296-0.0098,3.8267-0.666,5.1587-0.6748c1.3335-0.0088,2.8389-0.6514,4.1743-0.6592
                  c1.3335-0.0078,2.4971,0.6191,3.8325,0.6123c2.5518-0.0127,7.3579,0.3965,9.9175,0.3877c5.3169-0.0176,5.5796-0.4063,10.9297-0.4063
                  c1.8379,0,6.7031,1.3184,8.3203,1.2402c2.1055-0.1016,3.7139-1.6572,5.5283-1.7969c3.9541-0.3037,7.3262-0.5732,10.5986-0.2598
                  c6.248,0.5977,12.1973-0.8125,21.207-0.7539c1.7266,0.0107,15.7813,3.085,17.5,3.0977c3.4014,0.0254,6.6191-1.3398,9.9971-1.3066
                  c4.1221,0.041,8.2275,1.2529,12.3369,1.3066c2.0752,0.0273,4.1543-1.1084,6.2314-1.0771c3.3662,0.0498,4.5547,1.0166,7.9346,1.0771
                  c2.1104,0.0381,6.4063-0.834,8.5264-0.792c2.7021,0.0537,4.4766-1.6729,7.2002-1.6113c2.9277,0.0654,7.6465,3.1641,10.6074,3.2393
                  c4.8359,0.123,8.8809-0.9854,13.832-0.8359c2.5029,0.0752,11.8818,2.0498,14.375,2.1289c1.8398,0.0586,2.499-1.2188,4.334-1.1582
                  c2.1689,0.0713,4.5049,1.209,6.666,1.2832c2.6699,0.0908,4.3398-0.916,6.998-0.8203c3.3379,0.1201,6.0566,1.3193,9.377,1.4453
                  c4.001,0.1514,4.7764-1.1602,8.75-1c3.1836,0.1289,16.834,1.9912,20,2.125c4.0059,0.1699,4.0029-0.9004,7.9814-0.7227
                  c6.8594,0.3076,7.9102,1.7656,14.6855,2.0977c8.916,0.4365,23.5254-0.2432,32.293,0.2344
                  c6.7168,0.3662,13.3896,0.7432,20.0186,1.1318C1458.8545,268.4941,1680,316.4209,1680,316.4209H0z"
            />
            <path
              id="stone1"
              d="M680.3335,250.7549c7.3335,0.333,13.6665-1.2549,6-6.4609s-14.333-7.1221-18.6665,0.8359
                  S680.3335,250.7549,680.3335,250.7549z"
            />
            <path
              id="stone2"
              d="M750.5,243.1709c3.25,0,2.5-3.707-1.75-4.2285s-5,3.7285-3,4.2285S750.5,243.1709,750.5,243.1709z"
            />
            <path
              id="stone3"
              d="M988.4893,243.8242c2.8857,0.3467,4.8438,1.2627,3.0107-2.0703s-7.3955,1.3555-5.2031,1.7129
                  S988.4893,243.8242,988.4893,243.8242z"
            />
            <path
              id="stone4"
              d="M697,248.9355c2.0142-0.2021,2.1665-2.0156,1-2.1816s-9.1543,1.8398-5.9937,2.6699S697,248.9355,697,248.9355z"
            />
            <g id="greens" transform="translate(850, 180)">
              <g>
                <path
                  d="M36.3877,59.4268C33.0576,18.9482,6.4658,4.522,6.4658,4.522s22.4834,16.1426,24.4414,54.2251
      C32.8657,96.8311,36.3877,59.4268,36.3877,59.4268z"
                />
                <path
                  d="M41.8496,83.1641C31.1572,43.98,2.3711,34.6738,2.3711,34.6738s25.063,11.7471,33.9668,48.8271
      C45.2441,120.5791,41.8496,83.1641,41.8496,83.1641z"
                />
                <path
                  d="M31.3955,60.7207C23.7139,25.7979,2.5381,16.9541,2.5381,16.9541s18.4165,10.9277,24.7925,43.9502
      C33.7061,93.9258,31.3955,60.7207,31.3955,60.7207z"
                />
                <path
                  d="M40.4517,62.0068C47.9473,21.6187,25.4009,0.1914,25.4009,0.1914s18.0098,21.9634,9.7896,59.6357
      C26.9722,97.499,40.4517,62.0068,40.4517,62.0068z"
                />
                <path
                  d="M41.9414,69.4316c13.0313-38.9565-6.3218-63.3062-6.3218-63.3062s14.7856,24.251,1.4141,60.4185
      C23.6621,102.709,41.9414,69.4316,41.9414,69.4316z"
                />
                <path
                  d="M29.4976,87.9092c27.4097-30.5938,19.2993-60.6226,19.2993-60.6226s3.958,28.1255-22.6606,56.0249
      C-0.4775,111.2109,29.4976,87.9092,29.4976,87.9092z"
                />
                <animateTransform
                  attributeName="transform"
                  type="skewX"
                  values="0;10;0"
                  begin="0s"
                  dur="5.5s"
                  fill="freeze"
                  repeatCount="indefinite"
                />
                <animateMotion
                  type="translate"
                  values="0,0;-10,0;0,0"
                  begin="0s"
                  dur="5.5s"
                  fill="freeze"
                  repeatCount="indefinite"
                />
              </g>
              <g>
                <path
                  d="M34.9995,60.4189C56.0713,30.6665,46.1133,5.4014,46.1133,5.4014S52.2559,29.4746,31.6235,56.79
      C10.9917,84.1035,34.9995,60.4189,34.9995,60.4189z"
                />
                <path
                  d="M36.3047,64.5391c28.4629-23.4443,25.3262-51.189,25.3262-51.189s-0.293,25.4971-27.6851,46.6538
      C6.5552,81.1631,36.3047,64.5391,36.3047,64.5391z"
                />
                <path
                  d="M33.0449,70.502c31.4424-19.2637,32.1875-47.1748,32.1875-47.1748s-3.8291,25.208-33.897,42.3584
      C1.271,82.833,33.0449,70.502,33.0449,70.502z"
                />
                <path
                  d="M13.8237,76.0244c36.5039-5.2158,48.2563-30.543,48.2563-30.543S48.5693,67.1045,14.168,70.9248
      C-20.2324,74.749,13.8237,76.0244,13.8237,76.0244z"
                />
                <animateTransform
                  attributeName="transform"
                  type="skewX"
                  values="0;15;0"
                  begin="0s"
                  dur="5s"
                  fill="freeze"
                  repeatCount="indefinite"
                />
                <animateMotion
                  type="translate"
                  values="0,0;-15,0;0,0"
                  begin="0s"
                  dur="5s"
                  fill="freeze"
                  repeatCount="indefinite"
                />
              </g>
            </g>
            <g id="sign" transform="translate(700, 180)">
              <polygon
                points="21.2168,1.1143 20.6665,1.5459 19.7593,1.4473 19.229,1.4209 18.9707,1.6274 18.6665,1.9004 17.6865,1.9219
    37.3516,87.8877 40.8828,87.0791   "
              />
              <polygon
                points="45.4111,9.5537 2.4258,18.7158 1.563,18.498 1.4585,17.2114 0.8291,15.583 0.9165,14.3364 0.0908,12.6548
    0.2085,12.0864 -0.1924,11.5308 -0.3296,9.271 43.3408,-0.0376 43.4766,0.5015 43.334,0.9629 43.6533,1.2046 43.8232,1.8784
    43.8965,2.7754 44.2217,3.459 44.625,5.0576 45.041,7.5459 45.2637,7.5962 45.6191,9.0073  "
              />
              <polygon
                points="47.0078,20.8545 4.2368,29.5503 3.5933,28.5903 3.3965,26.9746 2.4683,24.5137 2.8398,24.1372 2.2676,23.7847
    1.9834,22.7563 2.2417,22.3394 1.7388,21.8706 1.2627,20.1426 44.8281,11.2852 45.082,12.4014 45.0723,12.9517 45.3281,13.481
    45.752,15.3369 46.0273,17.7524 46.4219,18.2803  "
              />
              <polygon
                points="47.666,31.168 4.7803,39.4023 4.251,37.4004 4.4429,36.1895 3.6465,35.1123 3.0142,32.7178 3.2754,32.1025
    2.7461,31.7046 2.2676,29.8945 45.9268,21.5107 46.0762,22.2007 45.9512,22.8423 46.2783,23.1372 46.6777,24.9795 46.5234,25.4795
    47.3027,27.8667 47.8086,30.2017   "
              />
            </g>
            <g id="boy_1_">
              <g id="boy">
                <path
                  d="M800.7324,167.6929c0,0-7.9688-6.5039-9.7197-8.041c-1.751-1.5366-7.9331-6.5039-8.7197-13.0435
      c-0.7861-6.5396,6.0752-15.188,17.7969-16.1885c11.7207-1.0005,12.9727,1.0366,14.1514,2.7163
      c1.1787,1.6792,5.7178,11.1494,5.0752,18.6538c-0.6445,7.5049-5.6826,10.1133-9.7559,13.3652
      C805.4863,168.4072,800.7324,167.6929,800.7324,167.6929z"
                />
                <path
                  d="M810.7031,169.2109c-1.0723-1.3037-1.3574-2.9556-1.1426-4.0645c0.2139-1.1084-8.041,0.1128-8.8281,2.542
      c1.6445,1.6787,0.751,3.146-0.5,4.1108c-1.25,0.9648-1.6797,1.502-1.9297,1.8237c0.0361,0.5361,0,0.9653,0,0.9653
      s-1.4297,1.7153-2.2871,6.5396s-0.6787,6.79-0.9648,8.3267c-0.2852,1.5366-1.4648,5.9678-1.751,10.292s0,4.5742,0,4.5742
      s1.251,1.7153,1.1436,4.0742s-1.2705,5.6099-1.2705,5.6099s0.2344,1.8945,1.8779,2.252c1.6445,0.3574,2.3594-0.6436,2.3594-0.6436
      s1.0713,1.3223,1.75,4.0742c0.6797,2.752,0.6436,6.79,1.8945,7.9688c1.251,1.1797,1.6074,0.3223,1.6074,0.3223
      s0.4648,3.3975-0.9277,6.6855c-1.3945,3.2881-4.1465,6.7568-4.1465,6.7568h11.0781c0,0,1.5723-3.5234-7.1113-2.2363
      c3.252-4.0742,3.8955-6.1934,4.0391-11.125c1.8223,0.5,4.252,0.6738,4.9316-0.3271c0.5352,1.3223,2.4297,2.1787,3.3584,1.7139
      c-0.2139,3.7168-1.0713,12.1846-1.0713,12.1846l9.0049,0.2852c0,0-0.751-3.2168-6.29-1.4307
      c1.001-6.7891,1.3584-11.5068,1.3584-11.5068s1.3584,0.1074,1.8584-0.3926c0.5-0.501,0.6787-5.3252-0.4648-9.9346
      c-1.1436-4.6104-0.5-4.4678-0.5-4.4678s1.75-0.8213,1.5-2.8584s-0.8574-3.6807-1.5352-5.5391
      c0.4639-0.1074,1-0.7861-0.6797-2.7158c-0.2148-2.5015-0.9648-6.3242-0.6436-7.6465s0.2148-2.8232-0.1787-4.3599
      c0-2.4302,0.7148-13.1509-1.25-17.0103c-1.9658-3.8594-2.5371-3.5737-2.5371-3.5737S812.5977,169.0142,810.7031,169.2109z"
                />
              </g>
              <g transform="translate(783, 122)">
                <g>
                  <path
                    d="M35.3506,17.9644c2.9834-3.71,5.9824-15.2095-3.1846-18.3765c2.668,3.833,1.168,5.6665,1.168,5.6665
  S32,1.2549,28.666-0.4121c1.5,3.1665,0,5,0,5S20.5,8.9209,24.5,13.2544S35.3506,17.9644,35.3506,17.9644z"
                  />
                  <animateTransform
                    attributeName="transform"
                    type="skewX"
                    values="0;30;0"
                    begin="0s"
                    dur="4s"
                    fill="freeze"
                    repeatCount="indefinite"
                  />
                  <animateMotion
                    type="translate"
                    values="0,0;-10,0;0,0"
                    begin="0s"
                    dur="4s"
                    fill="freeze"
                    repeatCount="indefinite"
                  />
                </g>
                <g>
                  <path
                    d="M27.125,6.2334c-1.8125-0.625-2.0625-1.9375-4.375-2.25c1,0.8125,1.125,1.6875,1.125,1.6875S21.5,4.3584,19.0625,3.9834
  c1.3125,0.75,2,1.875,2,1.875s-3.25-0.75-5.875-0.75c1.125,0.3125,1.125,0.6875,1.125,0.6875S10.75,5.8584,8.6875,7.4834
  c1,0.125,0.9375,0.6714,0.9375,0.6714s-4.25,1.5786-5.375,3.7661c0.875-0.4375-0.8125,1.8125-0.8125,1.8125s0.75,1.375-0.3125,1.125
  S0.5,14.1084,0.5,12.5459c-0.5,2.1875,0.6924,2.5767,1.4375,3.3125c-0.0625,1-0.9375,2.6494-1.25,2.106s0.8594,0.4282,0.0547,2.4731
  c-0.8047,2.0459-1.1533,3.7432-0.5103,6.5195s2.7056,4.5264,3.5181,6.2139s0.5-1.6875,0.5-1.6875L27.125,6.2334z"
                  />
                </g>
              </g>
            </g>
          </svg>
        </div>
      </div>
    </div>
    <div id="lyric"></div>
    <svg
      style="position: absolute; bottom: 0; right: -4rem; width: 18rem"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 800 400"
    >
      <defs>
        <symbol
          id="wind-one"
          viewBox="-10 -10 220 100"
          preserveAspectRatio="none"
        >
          <path
            fill="none"
            stroke="#0A6463"
            stroke-miterlimit="10"
            d="M198.36,63.26c-16.89-13.33-36.29-25.2-85.14-3.35
        S5.9,85.45,0.39,38.61S50.27-7.5,60.57,14.63s-1.76,40.88-18.98,34.01S24.87,17.44,42.12,27.6"
          />
        </symbol>
        <symbol
          id="wind-two"
          viewBox="-10 -10 220 100"
          preserveAspectRatio="none"
        >
          <path
            fill="none"
            stroke="#0A6463"
            stroke-miterlimit="10"
            d="M126.18,5.53C67.68-4.05,10.55-3.91,1.37,28.27
        s30.53,47.04,41.45,42.04s21.94-15.4,16.15-28.88s-31.06-7-31.51,0S23.82,54.15,35,54.55"
          />
        </symbol>
        <symbol
          id="wind-three"
          viewBox="-10 -10 220 100"
          preserveAspectRatio="none"
        >
          <path
            fill="none"
            stroke="#0A6463"
            stroke-miterlimit="10"
            d="M166.93,65.99c-16.84-8.37-57.49,2.93-73.86,6.55
        S11.32,99.15,0.95,41.63C-2.49,22.5,3.78,10.82,13.74,4.87c20-11.92,54.9-0.71,56.08,19.88c1.77,30.86-29.6,38.59-42.23,13.86
        c-8.94-17.5,21.22-15.44,15.86-4.22"
          />
        </symbol>

        <symbol id="hair-bottom" viewBox="40 320 500 400">
          <path
            fill="#FFFFFF"
            d="M470.25,367.38c37.15,8.98,41.59,17.87,47.17,36.74C523,423,533.68,479.73,378.34,520.12s-280.07-13.8-312.46-72.96S46.96,346.05,46.96,346.05s5,73.89,67.55,95.75C209,474.81,332.67,334.12,470.25,367.38z"
          />
          <path
            fill="none"
            d="M462.41,372.75c39.75,8.75,50.35,24.11,41.07,56.59s-127.7,77.97-174.21,82.32s-103.4,26.04-202.46-12.43"
          />
          <path
            fill="none"
            d="M475.65,381.69c12.82,4.52,23.19,13.66,23.21,25.85c0.02,17.46-10.46,26.92-36.45,41.21C407,479.22,310.11,512.77,229,510.46S91.1,477.34,91.1,477.34"
          />
          <path
            fill="none"
            d="M475.5,385.78c13.42,11.31,14.75,12.73,16.25,18.35c1.5,5.62,4.44,9.88-7.78,18.88c-12.22,9-142.01,59.25-201.86,65.5s-160.71-1.29-190.22-32.3s-39.49-38.81-45.98-85.13c-1.16-8.32,0.42-22.56,0.42-22.56"
          />
          <path
            fill="none"
            d="M457.56,378.11C383,385,225.5,460.82,167.59,460.73c-57.91-0.1-88.33-27.57-99.19-44.47s-19.47-28.15-21.43-70.2"
          />
          <path
            fill="none"
            d="M459.98,391.54c-72.98,13.13-188.56,84.44-242.75,84.02c-54.2-0.43-80.09,4.09-137.66-31.56"
          />
        </symbol>

        <symbol id="hair-middle" viewBox="40 320 500 400">
          <path
            fill="#FFFFFF"
            d="M484.53,402.8c-1.77,19.51-82.62,62.35-104.5,68.09c-21.88,5.74-88.75,18.2-135.89-19.01s-49.18-74.04-86.83-79.13s-42.8,0.53-42.8,0.53s22.5-16.02,62.49-5.82c39.99,10.2,36.97,21.87,70.99,23.99c51.65,3.22,125.63-57.1,169.13-47.78C460.63,352.98,487.39,371.26,484.53,402.8z"
          />
          <path
            fill="none"
            d="M458.78,423c-33.11-0.34-47.46,7.3-83.62,22.65C339,461,286.55,453.21,238.93,430.23c-23.26-11.23-35.83-21.27-35.83-21.27c25.42,25.82,62.29,51.65,120.02,52.83s97.65-14.74,125.98-33.12"
          />
          <path
            fill="none"
            d="M440,393.75c-25.42,30.6-54.21,47.76-98.33,46.32s-76.35-6.83-111.01-23.12s-40.56-25.4-40.56-25.4"
          />
          <path
            fill="none"
            d="M455.46,384c-33.19,0.66-78.63,39.84-106.79,42.65c-28.16,2.81-84.06,3.34-129.31-22.25c-18.64-10.54-38.79-22.04-38.79-22.04"
          />
          <path
            fill="none"
            d="M465,384c-50.32-21.39-90.41-7.14-124.04,13.26s-89.44,11.9-137.87-7.83c-48.43-19.73-31.51-21.63-86.14-18.37"
          />
          <path
            fill="none"
            d="M468.37,380.3c-100.7-39.3-160.13,10.83-189.91,16.43c-29.79,5.6-100.44-22.65-122.09-28.66c-9.7-2.69-35.19,1.71-35.19,1.71"
          />
        </symbol>

        <symbol id="body" viewBox="40 320 500 400">
          <path
            fill="#CB42A4"
            d="M437.5,629.45c1.44,22.42,9.09,41.22,9.09,41.22h9.91c0,0-2.29-34.04,0.94-40.36S437.5,629.45,437.5,629.45z"
          />
          <path
            fill="#CB42A4"
            d="M464.38,629.12c2.62,9.25,4.89,26.79,3,38.42c4.61,0.77,9.88,1.34,9.88,1.34s0.88-8.22,1.62-10.88c0.59-2.1,2.88-15.38,2.88-19.88S481,627.25,481,627.25L464.38,629.12z"
          />
          <ellipse
            transform="matrix(0.9582 -0.2862 0.2862 0.9582 -110.5383 139.1237)"
            fill="#FBD6B1"
            cx="420.65"
            cy="447.7"
            rx="5.96"
            ry="5.5"
          />
          <ellipse
            transform="matrix(0.9636 0.2675 -0.2675 0.9636 136.1582 -115.0723)"
            fill="#FBD6B1"
            cx="490.38"
            cy="442.15"
            rx="7.14"
            ry="6.17"
          />
          <ellipse
            transform="matrix(0.8409 0.5413 -0.5413 0.8409 379.3112 -127.7332)"
            fill="#FBD6B1"
            cx="406.87"
            cy="581.15"
            rx="10.16"
            ry="12.53"
          />
          <ellipse
            transform="matrix(0.8865 -0.4628 0.4628 0.8865 -211.2312 299.6882)"
            fill="#FBD6B1"
            cx="505.24"
            cy="580.4"
            rx="10.66"
            ry="12.82"
          />
          <path
            fill="#008583"
            d="M481,472.84c14.67,10.83,24.8,44.49,30,57.02c5.2,12.53,13.28,38.69,7.47,43.78c-5.8,5.09-16.17,6.34-29.32,5.19c-13.15-1.15-74.33,3.89-74.33,3.89s-22.47-4.76-25.81-15.73s12.71-21.64,15.98-26.15c3.28-4.51,15.59-33.33,16.85-45.01s14.82-19.61,14.82-19.61L481,472.84z"
          />
          <path
            fill="#008583"
            d="M435.64,500.46c1.83,10.88-1.81,29.93-11.23,50.9c-9.41,20.97-15.91,53.84-15.52,62.11c0.39,8.27,1.91,8.83,1.91,8.83s20.06,9.73,49.22,9.38s39.31-2.45,45.98-9.4c0-22.62-8-37.97-13.66-61.28s-7.45-39.99-6.45-64.89"
          />
          <path
            fill="none"
            d="M459.12,489.02c-0.29,9.87-7.46,14.53-9.33,40.83c-1.66,23.33,2.13,80.85,7.35,90.74c5.22,9.89,5.28,11.06,5.28,11.06"
          />
          <line fill="none" x1="446.79" y1="510.2" x2="456.58" y2="520.56" />
          <line fill="none" x1="444.63" y1="517.91" x2="457.94" y2="512" />
          <line fill="none" x1="456.09" y1="541.86" x2="444.79" y2="553.61" />
          <line fill="none" x1="445.14" y1="544.93" x2="455.57" y2="553.12" />
          <line fill="none" x1="456.8" y1="573.59" x2="444.32" y2="585.32" />
          <line fill="none" x1="443.75" y1="575.37" x2="456.5" y2="583.23" />
          <line fill="none" x1="459.05" y1="607.14" x2="449.9" y2="616.86" />
          <line fill="none" x1="446.59" y1="607.14" x2="461.07" y2="614.51" />
          <path
            fill="#FECB0D"
            d="M446.59,690.61c-0.3-8.3-4.95-24.5-4.95-24.5c5.58,3.05,15.99,1.57,17.41,0c-2.14,6.53-2.56,21.1-2.47,24.5C452,690.67,446.59,690.61,446.59,690.61z"
          />
          <path
            fill="#FECB0D"
            d="M465.53,664.48c-1.67,9.83,0.8,22.45,2.97,26.15c5.5-0.3,11.21-2.58,11.21-2.58c-2.24-7.9,2.96-20.51,2.96-20.51C476.09,668.8,465.53,664.48,465.53,664.48z"
          />
          <path
            fill="#FECB0D"
            d="M463.48,698.97c0,5.72-4.96,8.36-11.08,8.36s-11.08-2.64-11.08-8.36c0-5.72,4.96-10.36,11.08-10.36S463.48,693.25,463.48,698.97z"
          />
          <path
            fill="#FECB0D"
            d="M488.24,698.42c0,6.1-5.21,8.91-11.63,8.91s-11.63-2.81-11.63-8.91s5.21-11.04,11.63-11.04S488.24,692.32,488.24,698.42z"
          />
          <path
            fill="#FECB0D"
            d="M436.67,469.42c-4.37,7.16-4.85,8.26,6.03,12.42c10.88,4.16,28.9,3.51,35.47-0.18c6.57-3.69,5.6-8.03,5.81-12.23c0.21-4.2-5.81-8.44-5.81-8.44L436.67,469.42z"
          />
          <path
            fill="#FECB0D"
            d="M438.94,456.33c-8.15,9.74-9.67,13.28-6.09,17.48c3.58,4.2,26.98,1.05,34.04-1.22c7.06-2.27,16.47-6.39,16.36-14.1c-0.11-7.71-7.91-7.94-7.91-7.94L438.94,456.33z"
          />
          <ellipse
            fill="#FBD6B1"
            cx="455.19"
            cy="423.72"
            rx="39.42"
            ry="38.39"
          />
          <path fill="none" d="M429.34,431.6c3.16-5.6,7.33-10.14,10.66,1.21" />
          <path fill="none" d="M467.24,432.63c4.26-9.46,8.93-8.54,10.93,0" />
          <path fill="none" d="M451.77,439.86c-3.44,3.31-2.15,4.45,1.87,5.8" />
          <path fill="none" d="M457.63,453.45c2.87,0.57,4.72-0.99,4.72-0.99" />
          <path
            fill="#FFFFFF"
            d="M480.44,391.89c0.39,11.26,12.42,21.57,12.42,21.57s2.25-8.03-0.77-14.11C489.07,393.28,480.44,391.89,480.44,391.89"
          />
        </symbol>

        <symbol id="hair-top" viewBox="40 320 500 400">
          <path
            fill="#FFFFFF"
            d="M489.17,381.42c1.32,13.75-21.77,26.84-42.17,29.19c-49,5.65-96.61-41.62-130.29-34.04c-17.1,3.85-35.01,26.82-35.01,26.82s4.73-31.67,22.84-44.03c18.11-12.36,37.58-28.94,93.19-28.31S487.79,367.06,489.17,381.42z"
          />
          <path
            fill="none"
            d="M487.06,381.91c-25.35-17.38-45.36-27.09-94.88-23.57s-83.94,2.42-110.48,45.04c-6.53,10.48,12.77-30.87,39.47-44.03c27-13.31,68.58-12.36,105.33-8.36s61.77,29.38,61.77,29.38"
          />
          <path
            fill="none"
            d="M486.1,383.25c-13.43,12.08-30.12,12.34-53.77,6.23s-65.99-23.31-97.99-19.06s-37.37,13.89-37.37,13.89"
          />
          <path
            fill="none"
            d="M468.37,404.57c-16.37,2.45-34.54,0.65-49.19-7.31c-14.66-7.96-31.26-21.77-55.11-23.98"
          />
          <path
            fill="none"
            d="M485.61,381.69c-17.07-4.97-109.34-24.95-128.61-20.74"
          />
        </symbol>
      </defs>

      <g transform="translate(450, 60)">
        <use
          class="bottom"
          x="-450"
          y="-60"
          id="bottom"
          xlink:href="#hair-bottom"
          stroke="#1d1d1d"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          width="500"
          height="400"
        />
      </g>
      <g transform="translate(450, 60)">
        <use
          class="middle"
          x="-450"
          y="-60"
          xlink:href="#hair-middle"
          stroke="#1d1d1d"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          width="500"
          height="400"
        />
      </g>
      <use
        xlink:href="#body"
        stroke="#1d1d1d"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        width="500"
        height="400"
      />
      <g transform="translate(450, 60)">
        <use
          class="top"
          x="-450"
          y="-60"
          xlink:href="#hair-top"
          stroke="#1d1d1d"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          width="500"
          height="400"
        />
      </g>

      <use
        class="wind"
        xlink:href="#wind-one"
        x="50"
        y="100"
        width="600"
        height="200"
        stroke-width="3"
        stroke-linecap="round"
      />
      <use
        class="wind"
        xlink:href="#wind-three"
        x="150"
        y="0"
        width="600"
        height="200"
        stroke-width="3"
        stroke-linecap="round"
      />
      <use
        class="wind"
        xlink:href="#wind-two"
        x="200"
        y="250"
        width="600"
        height="200"
        stroke-width="3"
        stroke-linecap="round"
      />
    </svg>
    <canvas style="position: absolute; z-index: 99" id="canvas2"
      >Canvas is not supported in your browser.</canvas
    >
    <audio
      style="display: none"
      id="audio"
      src="/ui/c.mp3"
      controls="controls"
    ></audio>
    <script src="/ui/lrc-file-parser.min.js"></script>
    <script>
      // window.requestAnimationFrame =
      //   window.requestAnimationFrame ||
      //   window.mozRequestAnimationFrame ||
      //   window.webkitRequestAnimationFrame ||
      //   window.msRequestAnimationFrame;

      var starDensity = 0.216;
      var speedCoeff = 0.05;
      var width;
      var height;
      var starCount;
      var circleRadius;
      var circleCenter;
      var first = true;
      var giantColor = "180,184,240";
      var starColor = "226,225,142";
      var cometColor = "226,225,224";
      var canva = document.getElementById("universe");
      var stars = [];
      var dom_audio = document.getElementById("audio");
      var dom_lyric = document.getElementById("lyric");

      windowResizeHandler();
      window.addEventListener(
        "resize",
        () => {
          windowResizeHandler();
          setRem();
        },
        false
      );

      createUniverse();

      function createUniverse() {
        universe = canva.getContext("2d");

        for (var i = 0; i < starCount; i++) {
          stars[i] = new Star();
          stars[i].reset();
        }

        draw();
      }

      function draw() {
        universe.clearRect(0, 0, width, height);

        var starsLength = stars.length;

        for (var i = 0; i < starsLength; i++) {
          var star = stars[i];
          star.move();
          star.fadeIn();
          star.fadeOut();
          star.draw();
        }

        window.requestAnimationFrame(draw);
      }

      function Star() {
        this.reset = function () {
          this.giant = getProbability(3);
          this.comet = this.giant || first ? false : getProbability(10);
          this.x = getRandInterval(0, width - 10);
          this.y = getRandInterval(0, height);
          this.r = getRandInterval(1.1, 2.6);
          this.dx =
            getRandInterval(speedCoeff, 6 * speedCoeff) +
            (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120) +
            speedCoeff * 2;
          this.dy =
            -getRandInterval(speedCoeff, 6 * speedCoeff) -
            (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120);
          this.fadingOut = null;
          this.fadingIn = true;
          this.opacity = 0;
          this.opacityTresh = getRandInterval(
            0.2,
            1 - (this.comet + 1 - 1) * 0.4
          );
          this.do =
            getRandInterval(0.0005, 0.002) + (this.comet + 1 - 1) * 0.001;
        };

        this.fadeIn = function () {
          if (this.fadingIn) {
            this.fadingIn = this.opacity > this.opacityTresh ? false : true;
            this.opacity += this.do;
          }
        };

        this.fadeOut = function () {
          if (this.fadingOut) {
            this.fadingOut = this.opacity < 0 ? false : true;
            this.opacity -= this.do / 2;
            if (this.x > width || this.y < 0) {
              this.fadingOut = false;
              this.reset();
            }
          }
        };

        this.draw = function () {
          universe.beginPath();

          if (this.giant) {
            universe.fillStyle =
              "rgba(" + giantColor + "," + this.opacity + ")";
            universe.arc(this.x, this.y, 2, 0, 2 * Math.PI, false);
          } else if (this.comet) {
            universe.fillStyle =
              "rgba(" + cometColor + "," + this.opacity + ")";
            universe.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, false);

            //comet tail
            for (var i = 0; i < 30; i++) {
              universe.fillStyle =
                "rgba(" +
                cometColor +
                "," +
                (this.opacity - (this.opacity / 20) * i) +
                ")";
              universe.rect(
                this.x - (this.dx / 4) * i,
                this.y - (this.dy / 4) * i - 2,
                2,
                2
              );
              universe.fill();
            }
          } else {
            universe.fillStyle = "rgba(" + starColor + "," + this.opacity + ")";
            universe.rect(this.x, this.y, this.r, this.r);
          }

          universe.closePath();
          universe.fill();
        };

        this.move = function () {
          this.x += this.dx;
          this.y += this.dy;
          if (this.fadingOut === false) {
            this.reset();
          }
          if (this.x > width - width / 4 || this.y < 0) {
            this.fadingOut = true;
          }
        };

        (function () {
          setTimeout(function () {
            first = false;
          }, 50);
        })();
      }

      function getProbability(percents) {
        return Math.floor(Math.random() * 1000) + 1 < percents * 10;
      }

      function getRandInterval(min, max) {
        return Math.random() * (max - min) + min;
      }

      function windowResizeHandler() {
        width = window.innerWidth;
        height = window.innerHeight;
        starCount = width * starDensity;
        // console.log(starCount)
        circleRadius = width > height ? height / 2 : width / 2;
        circleCenter = {
          x: width / 2,
          y: height / 2,
        };

        canva.setAttribute("width", width);
        canva.setAttribute("height", height);
      }

      var Clock = (function () {
        var canvas,
          ctx,
          bgGrad = true,
          gradient,
          height = 400,
          key = {
            up: false,
            shift: false,
          },
          particles = [],
          // particleColor = 'hsla(0, 0%, 100%, 0.3)',
          mouse = {
            x: 0,
            y: 0,
          },
          press = false,
          quiver = true,
          texts = ["听首歌?"],
          text = texts[0] || "",
          textNum = 0,
          textSize = 60,
          valentine = false,
          msgTime = 100,
          updateColor = true,
          width = 420;

        var FRAME_RATE = 60,
          MIN_WIDTH = 0,
          MIN_HEIGHT = 0,
          PARTICLE_NUM = 1200,
          RADIUS = Math.PI * 2;

        var defaultStyles = function () {
          // textSize = 36;
          // particleColor = 'rgba(226,225,142, 0.7)';
        };

        var draw = function (p) {
          ctx.fillStyle = "rgba(255,255,51, " + p.opacity + ")";
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.size, 0, RADIUS, true);
          ctx.closePath();
          ctx.fill();
        };

        var loop = function () {
          ctx.clearRect(0, 0, width, height);
          // textSize = 36;

          ctx.fillStyle = "rgb(255, 255, 255)";
          ctx.textBaseline = "middle";
          ctx.font =
            textSize + "px 'Avenir', 'Helvetica Neue', 'Arial', 'sans-serif'";

          ctx.fillText(
            text,
            (width - ctx.measureText(text).width) * 0.5,
            height * 0.5
          );

          var imgData = ctx.getImageData(0, 0, width, height);

          ctx.clearRect(0, 0, width, height);

          for (var i = 0, l = particles.length; i < l; i++) {
            var p = particles[i];
            p.inText = false;
          }
          particleText(imgData);
        };

        var pad = function (number) {
          return ("0" + number).substr(-2);
        };

        var particleText = function (imgData) {
          var pxls = [];
          for (var w = width; w > 0; w -= 3) {
            for (var h = 0; h < width; h += 3) {
              var index = (w + h * width) * 4;
              if (imgData.data[index] > 1) {
                pxls.push([w, h]);
              }
            }
          }

          var count = pxls.length;
          var j = parseInt((particles.length - pxls.length) / 2, 10);
          if (j < 0) {
            j = 0;
          }

          for (var i = 0; i < pxls.length && j < particles.length; i++, j++) {
            try {
              var p = particles[j],
                X,
                Y;

              if (quiver) {
                X = pxls[count - 1][0] - (p.px + Math.random() * 5);
                Y = pxls[count - 1][1] - (p.py + Math.random() * 5);
              } else {
                X = pxls[count - 1][0] - p.px;
                Y = pxls[count - 1][1] - p.py;
              }
              var T = Math.sqrt(X * X + Y * Y);
              var A = Math.atan2(Y, X);
              var C = Math.cos(A);
              var S = Math.sin(A);
              p.x = p.px + C * T * p.delta;
              p.y = p.py + S * T * p.delta;
              p.px = p.x;
              p.py = p.y;
              p.inText = true;
              p.fadeIn();
              draw(p);
              if (key.up === true) {
                p.size += 0.3;
              } else {
                var newSize = p.size - 0.5;
                if (newSize > p.origSize && newSize > 0) {
                  p.size = newSize;
                } else {
                  p.size = m.origSize;
                }
              }
            } catch (e) {}
            count--;
          }
          for (var i = 0; i < particles.length; i++) {
            var p = particles[i];
            if (!p.inText) {
              // p.px = p.mx;
              // p.py = p.my;
              // p.opacity = 1;
              p.fadeOut();

              var X = p.mx - p.px;
              Y = p.my - p.py;

              var T = Math.sqrt(X * X + Y * Y);

              var A = Math.atan2(Y, X);

              var C = Math.cos(A);

              var S = Math.sin(A);

              p.x = p.px + (C * T * p.delta) / 2;
              p.y = p.py + (S * T * p.delta) / 2;
              p.px = p.x;
              p.py = p.y;

              draw(p);
            }
          }
        };

        var setDimensions = function () {
          // width = window.innerWidth;
          // height = window.innerHeight;

          canvas.width = window.innerWidth >= 420 ? 420 : width;
          canvas.height = window.innerHeight >= 150 ? 150 : height;

          width = canvas.width;
          height = canvas.height;

          canvas.style.position = "absolute";
          canvas.style.left = "0px";
          canvas.style.top = "0px";
          canvas.style.bottom = "0px";
          canvas.style.right = "0px";
          canvas.style.marginTop = window.innerHeight * 0.15 + "px";
        };

        var setGradient = function (gradientStops) {
          gradient = ctx.createRadialGradient(
            width / 2,
            height / 2,
            0,
            width / 2,
            height / 2,
            width
          );

          for (var position in gradientStops) {
            var color = gradientStops[position];
            gradient.addColorStop(position, color);
          }
        };

        /**
         * Public Methods
         */
        return {
          init: function (canvasID) {
            canvas = document.getElementById(canvasID);
            if (canvas === null || !canvas.getContext) {
              return;
            }
            ctx = canvas.getContext("2d");
            setDimensions();
            // this.event();

            for (var i = 0; i < PARTICLE_NUM; i++) {
              particles[i] = new Particle(canvas);
            }

            setInterval(loop, FRAME_RATE);
          },

          event: function (txt) {
            var end = false;
            text = txt;
            // console.log(texts.length);

            // document.addEventListener(
            //   "click",
            //   function (e) {
            //     textNum++;
            //     if (textNum >= texts.length) {
            //       textNum--;
            //       end = true;
            //       return;
            //     }
            //     text = texts[textNum];
            //     console.log(textNum);
            //   },
            //   false
            // );
          },
        };
      })();

      var Particle = function (canvas) {
        var range = (Math.random() * 180) / Math.PI,
          spread = canvas.height / 4,
          size = Math.random() * 1.2;

        this.delta = 0.15;
        this.x = 0;
        this.y = 0;

        this.px = canvas.width / 2 + (Math.random() - 0.5) * canvas.width;
        this.py = canvas.height * 0.5 + (Math.random() - 0.5) * spread;

        this.mx = this.px;
        this.my = this.py;

        this.velocityX = Math.floor(Math.random() * 10) - 5;
        this.velocityY = Math.floor(Math.random() * 10) - 5;

        this.size = size;
        this.origSize = size;

        this.inText = false;

        this.opacity = 0;
        this.do = 0.02;

        this.opacityTresh = 0.98;
        this.fadingOut = true;
        this.fadingIn = true;
        this.fadeIn = function () {
          this.fadingIn = this.opacity > this.opacityTresh ? false : true;
          if (this.fadingIn) {
            this.opacity += this.do;
          } else {
            this.opacity = 1;
          }
        };

        this.fadeOut = function () {
          this.fadingOut = this.opacity < 0 ? false : true;
          if (this.fadingOut) {
            this.opacity -= 0.06;
            if (this.opacity < 0) {
              this.opacity = 0;
            }
          } else {
            this.opacity = 0;
          }
        };
      };
      setTimeout(function () {
        Clock.init("canvas");
      }, 2000);
    </script>
    <script>
      function startFire() {
        window.requestAnimFrame = (function () {
          return (
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
              window.setTimeout(callback, 1000 / 60);
            }
          );
        })();

        // now we will setup our basic variables for the demo
        var canvas = document.getElementById("canvas2"),
          ctx = canvas.getContext("2d"),
          // full screen dimensions
          cw = window.innerWidth,
          ch = window.innerHeight,
          // firework collection
          fireworks = [],
          // particle collection
          particles = [],
          // starting hue
          hue = 120,
          // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
          limiterTotal = 5,
          limiterTick = 0,
          // this will time the auto launches of fireworks, one launch per 80 loop ticks
          timerTotal = 80,
          timerTick = 0,
          mousedown = false,
          // mouse x coordinate,
          mx,
          // mouse y coordinate
          my;

        // set canvas dimensions
        canvas.width = cw;
        canvas.height = ch;

        // now we are going to setup our function placeholders for the entire demo

        // get a random number within a range
        function random(min, max) {
          return Math.random() * (max - min) + min;
        }

        // calculate the distance between two points
        function calculateDistance(p1x, p1y, p2x, p2y) {
          var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
          return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
        }

        // create firework
        function Firework(sx, sy, tx, ty) {
          // actual coordinates
          this.x = sx;
          this.y = sy;
          // starting coordinates
          this.sx = sx;
          this.sy = sy;
          // target coordinates
          this.tx = tx;
          this.ty = ty;
          // distance from starting point to target
          this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
          this.distanceTraveled = 0;
          // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
          this.coordinates = [];
          this.coordinateCount = 3;
          // populate initial coordinate collection with the current coordinates
          while (this.coordinateCount--) {
            this.coordinates.push([this.x, this.y]);
          }
          this.angle = Math.atan2(ty - sy, tx - sx);
          this.speed = 2;
          this.acceleration = 1.05;
          this.brightness = random(50, 70);
          // circle target indicator radius
          this.targetRadius = 1;
        }

        // update firework
        Firework.prototype.update = function (index) {
          // remove last item in coordinates array
          this.coordinates.pop();
          // add current coordinates to the start of the array
          this.coordinates.unshift([this.x, this.y]);

          // cycle the circle target indicator radius
          if (this.targetRadius < 8) {
            this.targetRadius += 0.3;
          } else {
            this.targetRadius = 1;
          }

          // speed up the firework
          this.speed *= this.acceleration;

          // get the current velocities based on angle and speed
          var vx = Math.cos(this.angle) * this.speed,
            vy = Math.sin(this.angle) * this.speed;
          // how far will the firework have traveled with velocities applied?
          this.distanceTraveled = calculateDistance(
            this.sx,
            this.sy,
            this.x + vx,
            this.y + vy
          );

          // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
          if (this.distanceTraveled >= this.distanceToTarget) {
            createParticles(this.tx, this.ty);
            // remove the firework, use the index passed into the update function to determine which to remove
            fireworks.splice(index, 1);
          } else {
            // target not reached, keep traveling
            this.x += vx;
            this.y += vy;
          }
        };

        // draw firework
        Firework.prototype.draw = function () {
          ctx.beginPath();
          // move to the last tracked coordinate in the set, then draw a line to the current x and y
          ctx.moveTo(
            this.coordinates[this.coordinates.length - 1][0],
            this.coordinates[this.coordinates.length - 1][1]
          );
          ctx.lineTo(this.x, this.y);
          ctx.strokeStyle = "hsl(" + hue + ", 100%, " + this.brightness + "%)";
          ctx.stroke();

          ctx.beginPath();
          // draw the target for this firework with a pulsing circle
          ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI * 2);
          ctx.stroke();
        };

        // create particle
        function Particle(x, y) {
          this.x = x;
          this.y = y;
          // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
          this.coordinates = [];
          this.coordinateCount = 5;
          while (this.coordinateCount--) {
            this.coordinates.push([this.x, this.y]);
          }
          // set a random angle in all possible directions, in radians
          this.angle = random(0, Math.PI * 2);
          this.speed = random(1, 10);
          // friction will slow the particle down
          this.friction = 0.95;
          // gravity will be applied and pull the particle down
          this.gravity = 1;
          // set the hue to a random number +-20 of the overall hue variable
          this.hue = random(hue - 20, hue + 20);
          this.brightness = random(50, 80);
          this.alpha = 1;
          // set how fast the particle fades out
          this.decay = random(0.015, 0.03);
        }

        // update particle
        Particle.prototype.update = function (index) {
          // remove last item in coordinates array
          this.coordinates.pop();
          // add current coordinates to the start of the array
          this.coordinates.unshift([this.x, this.y]);
          // slow down the particle
          this.speed *= this.friction;
          // apply velocity
          this.x += Math.cos(this.angle) * this.speed;
          this.y += Math.sin(this.angle) * this.speed + this.gravity;
          // fade out the particle
          this.alpha -= this.decay;

          // remove the particle once the alpha is low enough, based on the passed in index
          if (this.alpha <= this.decay) {
            particles.splice(index, 1);
          }
        };

        // draw particle
        Particle.prototype.draw = function () {
          ctx.beginPath();
          // move to the last tracked coordinates in the set, then draw a line to the current x and y
          ctx.moveTo(
            this.coordinates[this.coordinates.length - 1][0],
            this.coordinates[this.coordinates.length - 1][1]
          );
          ctx.lineTo(this.x, this.y);
          ctx.strokeStyle =
            "hsla(" +
            this.hue +
            ", 100%, " +
            this.brightness +
            "%, " +
            this.alpha +
            ")";
          ctx.stroke();
        };

        // create particle group/explosion
        function createParticles(x, y) {
          // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
          var particleCount = 30;
          while (particleCount--) {
            particles.push(new Particle(x, y));
          }
        }

        // main demo loop
        function loop() {
          // this function will run endlessly with requestAnimationFrame
          requestAnimFrame(loop);

          // increase the hue to get different colored fireworks over time
          hue += 0.5;

          // normally, clearRect() would be used to clear the canvas
          // we want to create a trailing effect though
          // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
          ctx.globalCompositeOperation = "destination-out";
          // decrease the alpha property to create more prominent trails
          ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
          ctx.fillRect(0, 0, cw, ch);
          // change the composite operation back to our main mode
          // lighter creates bright highlight points as the fireworks and particles overlap each other
          ctx.globalCompositeOperation = "lighter";

          // loop over each firework, draw it, update it
          var i = fireworks.length;
          while (i--) {
            fireworks[i].draw();
            fireworks[i].update(i);
          }

          // loop over each particle, draw it, update it
          var i = particles.length;
          while (i--) {
            particles[i].draw();
            particles[i].update(i);
          }

          // launch fireworks automatically to random coordinates, when the mouse isn't down
          if (timerTick >= timerTotal) {
            if (!mousedown) {
              // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
              fireworks.push(
                new Firework(cw / 2, ch, random(0, cw), random(0, ch / 2))
              );
              timerTick = 0;
            }
          } else {
            timerTick++;
          }

          // limit the rate at which fireworks get launched when mouse is down
          if (limiterTick >= limiterTotal) {
            if (mousedown) {
              // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
              fireworks.push(new Firework(cw / 2, ch, mx, my));
              limiterTick = 0;
            }
          } else {
            limiterTick++;
          }
        }

        // mouse event bindings
        // update the mouse coordinates on mousemove
        canvas.addEventListener("mousemove", function (e) {
          mx = e.pageX - canvas.offsetLeft;
          my = e.pageY - canvas.offsetTop;
        });

        // toggle mousedown state and prevent canvas from being selected
        canvas.addEventListener("mousedown", function (e) {
          e.preventDefault();
          mousedown = true;
        });

        canvas.addEventListener("touchstart", function (e) {
          e.preventDefault();
          mx = e.changedTouches[0].pageX - canvas.offsetLeft;
          my = e.changedTouches[0].pageY - canvas.offsetTop;
          mousedown = true;
        });

        canvas.addEventListener("touchend", function (e) {
          e.preventDefault();
          mousedown = false;
          dom_audio.play();
        });

        canvas.addEventListener("mouseup", function (e) {
          e.preventDefault();
          mousedown = false;
        });

        // once the window loads, we are ready for some fireworks!
        window.onload = loop;
      }
      startFire();
    </script>
    <script>
      function initLyric() {
        var lyricTxt = `[00:11.22]风伴着黎明的歌声
[00:14.40]敲响命运的钟
[00:16.92]是夜不灭的灯
[00:19.50]那颗星在闪烁
[00:21.99]挣脱黑暗的落寞
[00:24.54]不甘是谁的过错
[00:27.00]信仰年少的梦想
[00:29.55]挫折不过梦一场
[00:32.07]烧不尽的野火
[00:34.65]勇敢面对生活
[00:37.17]打破缚束枷锁
[00:39.66]结果那么赤裸裸
[00:42.27]路途坎坎又坷坷
[00:44.76]打不倒的那么多
[00:47.25]何必任由他诉说
[00:50.70]受折磨
[00:54.18]风伴着黎明的歌声
[00:57.36]敲响命运的钟
[00:59.85]是夜不灭的灯
[01:02.43]那颗星在闪烁
[01:04.98]挣脱黑暗的落寞
[01:07.56]不甘是谁的过错
[01:09.93]信仰年少的梦想
[01:12.51]挫折不过梦一场
[01:15.00]烧不尽的野火
[01:17.61]勇敢面对生活
[01:20.16]打破缚束枷锁
[01:22.65]结果那么赤裸裸
[01:25.20]路途坎坎又坷坷
[01:27.75]打不倒的那么多
[01:30.18]何必任由他诉说
[01:33.60]受折磨
[01:37.11]风带不走落寞
[01:40.32]带不走过错
[01:42.81]剩下了执着
[01:45.36]孤单的我
[01:47.25]星不停在闪烁
[01:50.43]将这黑暗划破
[01:52.86]时刻准备着
`;

        var lrcLines = [];
        var lrc = new Lyric({
          onPlay: function (line, text) {
            dom_lyric.innerHTML = text;
            Clock.event(text);
          },
          onSetLyric: function (lines) {
            lrcLines = lines;
          },
        });

        dom_audio.onplay = function () {
          lrc.play(dom_audio.currentTime * 1000);
        };

        lrc.setLyric(lyricTxt, [lyricTxt]);

        document.body.addEventListener("click", () => {
          document.getElementById("audio").play();
        });

        dom_audio.ontimeupdate = throttle(function () {
          lrc.play(dom_audio.currentTime * 1000);
        }, 600);

        function throttle(func, delay) {
          let timeout = null;
          let lastCall = 0;

          return function (...args) {
            const now = new Date().getTime();
            if (!lastCall || now - lastCall >= delay) {
              lastCall = now;
              clearTimeout(timeout);
              func.apply(this, args);
            } else if (!timeout) {
              timeout = setTimeout(() => {
                lastCall = new Date().getTime();
                timeout = null;
                func.apply(this, args);
              }, now - lastCall);
            }
          };
        }
      }
      function setRem() {
        const baseSize = 32.0;
        const minWidth = 375;
        const maxWidth = 750;

        const clientWidth = document.documentElement.clientWidth;

        const scale = Math.max(minWidth, Math.min(clientWidth, maxWidth)) / 750;

        document.documentElement.style.fontSize =
          baseSize * Math.min(scale, 2) + "px";
      }

      document.addEventListener("DOMContentLoaded", setRem);
      setTimeout(() => {
        initLyric();
      }, 3000);
    </script>
  </body>
</html>
